<template>
    <view>
        <view class="order_detail">
            <view class="order_detail_box_1">
                <view>
<!--                    <view></view>-->
                    <view class="address_info">{{orderInfo.order_info.address_address}}</view>
                </view>
                <view v-if="orderInfo.good_status===1" class="type_text">待发货</view>
                <view v-if="orderInfo.good_status===2" class="type_text">待收货</view>
                <view v-if="orderInfo.good_status===3" class="type_text">已完成</view>
            </view>
            <view class="order_detail_box_2" v-for="(item,index) in orderInfo.order_info.product_info" :key="index">
                <view><image class="goods_img" :src="item.image"/></view>
                <view class="box_2_1">
                    <view class="goods_name">{{item.product_name}}</view>
                    <view class="money_num_box">
                        <view class="money">￥{{item.integral}}</view>
                        <view class="goods_num">{{item.number}}{{item.unit}}</view>
                    </view>
                </view>
            </view>
            <view style="width: 100%;height: 10px;background-color:#F7F7F7;"></view>
            <view class="order_detail_box_3">
                <view class="info_1">商品信息</view>
                <view class="info_2">订单编号：{{orderInfo.order_number}}</view>
                <view class="info_3">创建时间：{{orderInfo.created_at}}</view>
            </view>
            <view class="beizhu_box">
                <view class="beizhu_text">用户备注：</view>
                <view class="beizhu_area">
                    {{orderInfo.remark}}
                </view>
            </view>
        </view>
    </view>

</template>

<script>
    export default {
        name: "orderDetail",
        data() {
            return {
                orderInfo: {},
                order_number:''
            }
        },
        onLoad(query){
            this.order_number=query.order_number
        },
        mounted() {
            this.getOrderInfo()
        },
        methods: {
            async getOrderInfo(){
                let resData = await  this.$apis.getOrderInfo({order_number:this.order_number})
                if(resData.code===0){
                    this.orderInfo=resData.data.order
                    console.log(this.orderInfo)
                }
            }

        }
    }
</script>
<style lang="less" scoped>
    .order_detail_box_1{
        display: flex;
        flex-direction: row;
        justify-content: left;
        font-size: 26rpx;
        padding:30rpx 30rpx;
        border-bottom: solid 0.5px #E5E5E5;
    }
    .type_text{
        color: #FF9502;
        width: 16%;
    }
    .address_info{
        /*margin-top: 20rpx;*/

    }
    .order_detail_box_2{
        display: flex;
        flex-direction: row;
    }
    .money_num_box{
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }
    .goods_img{
        width: 120rpx;
        height: 120rpx;
        margin-left: 20rpx;
    }
    .goods_name{
        font-size: 28rpx;
    }
    .money{
        font-size: 28rpx;
        color: #FF9502;
        margin-top: 40rpx;
    }
    .goods_num{
        font-size: 24rpx;
        color: #666666;
        margin-top: 45rpx;
    }
    .box_2_1{
        width: 100%;
        padding-left: 20rpx;
        padding-right: 30rpx;
        border-bottom: solid 0.5px #E5E5E5;
    }
    .info_1{
        font-size: 26rpx;
        margin-top: 10rpx;
    }
    .info_2,.info_3{
        font-size: 24rpx;
        color: #666666;
        margin-top: 10rpx;
    }
    .order_detail_box_3{
        padding-left: 20rpx;
        padding-top: 20rpx;
    }
    .beizhu_box{
        display: flex;
        flex-direction: row;
        justify-content: left;
        background-color: #ffffff;
        font-size: 24rpx;
        padding-left: 20rpx;
    }
    .beizhu_text{
        /*width: 120%;*/
        color:#666666;
        padding-bottom: 15rpx;
        padding-top: 12rpx;
    }
    .beizhu_area{
        font-size: 24rpx;
        padding-top: 12rpx;
        padding-right: 20rpx;
        /*margin-left: -10rpx;*/
        color: #666666;
        /*line-height: 1.8px;*/
        /*padding-top: 8rpx;*/
    }
</style>
